var app = new Vue({
  el: '#app',
  data: {
    // 表盘
    clock: {
      w: $('#clock')[0].offsetWidth, // 宽：自适应
      h: $('#clock')[0].offsetHeight // 高：获取
    },

    // 表盘中心
    center: {
      x: 0,
      y: 0,
      w: 12,
      h: 12,
      r: 6
    },

    date: {
      hour_rotate: 0, // 时针角度
      minute_rotate: 0, // 分针角度
      second_rotate: 0 // 秒针角度
    }
  },
  methods: {
    current_time() {
      let myDate = new Date()
      let t = {}

      t.h = myDate.getHours() //获取当前小时数(0-23)
      t.m = myDate.getMinutes() //获取当前分钟数(0-59)
      t.s = myDate.getSeconds() //获取当前秒数(0-59)
      t.ms = myDate.getMilliseconds() //获取当前毫秒数(0-999)

      this.date.hour_rotate = (t.h + t.m / 60 + t.s / 3600) * 30 - 90 // 一小时 30 度
      this.date.minute_rotate = (t.m + t.s / 60) * 6 - 90 // 一分钟 6
      this.date.second_rotate = (t.s + t.ms / 1000) * 6 - 90 // 一秒钟 6 度
    }
  },
  mounted: function() {
    // 中心点
    this.center.x = this.clock.w / 2
    this.center.y = this.clock.h / 2

    // 每 0.1 秒
    this.timer1 = setInterval(this.current_time, 100)
  }
})
